<template>
    <div class="bigscreen">
        <div class="left">
            <pie-view class="left-1" :resData="resData"></pie-view>
            <bar-view class="left-2" :resData="resData"></bar-view>
            <warning-view class="left-3" :resData="resData"></warning-view>
        </div>
        <div class="center-top">
            <div
                :class="{activeClass:activeIndex==index}"
                v-for="(item, index) in Datas"
                :key="item.ID"
                @click="updateData(index)"
            >
                <img :src="item.src" alt=""/>
                {{ item.名称 }}
            </div>
        </div>
        <div class="center-top2">
            <div class="box" v-for="item2 in Datas2" :key="item2.index">
                <div class="name">
                    <img src="@/assets/images/4.png" alt=""/> {{ item2.板块名称 }}
                </div>
                <div class="number" @click="data2Click(item2)">{{ item2.项目数量 }}</div>
            </div>
        </div>
        <div class="center-top3">
            <div class="box" :class="{box2:Datas3Hover.includes(key)}" v-for="(value,key) in Datas3" :key="key"
                @click="data3Click(key)">
                <div class="name">{{ key }}</div>
                <div class="number">{{ value }}</div>
            </div>
        </div>
        <line-view class="center-bt" :info="Datas4" v-if="flag"></line-view>
        <div class="right">
            <examine-view class="right-1" :resData="resData"></examine-view>
            <radar-view class="right-2" :resData="resData"></radar-view>
            <problem-view class="right-3" :resData="resData"></problem-view>
        </div>
    </div>
</template>

<script>
    //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
    //例如：import 《组件名称》 from '《组件路径》';
    import PieView from "@/components/PieView.vue";
    import LineView from "@/components/LineView.vue";
    import WarningView from "@/components/WarningView.vue";
    import ExamineView from "@/components/ExamineView.vue";
    import ProblemView from "@/components/ProblemView.vue";
    import BarView from "@/components/BarView.vue";
    import RadarView from "@/components/RadarView.vue";
    import {HomeList} from "@/api/home.js";
    import {ref} from "vue";
    export default {
        //import引入的组件需要注入到对象中才能使用
        components: {
            PieView,
            LineView,
            WarningView,
            ExamineView,
            ProblemView,
            BarView,
            RadarView,
        },
        data(){
            return{
                Datas3Hover:['项目数','进度滞后','应开未开'],
            }
        },
        setup() {
            //这里存放数据
            let Datas = ref([]);
            let Datas2 = ref([]);
            let Datas3 = ref({});
            let Datas4 = ref({});
            let flag = ref(false);
            let activeIndex = ref(0);
            let resData = ref({});
            HomeList().then((res) => {
                resData.value = res;
                Datas.value = res.data.项目标签数据;
                Datas.value.forEach((value, i) => {
                    value.src = require(`@/assets/images/2${i + 1}.png`);
                });
                updateData(0);
            });
            function updateData(index) {
                flag.value = false;
                Datas2.value = Datas.value[index].各项数据.三变板块;
                Datas3.value = Datas.value[index].各项数据.主要指标;
                Datas4.value = Datas.value[index].各项数据.各月完成情况;
                setTimeout(() => {
                    flag.value = true;
                }, 100);
                activeIndex.value = index
            }
            return {
                Datas,
                Datas2,
                Datas3,
                Datas4,
                flag,
                updateData,
                activeIndex,
                resData,
            };
        },
        methods:{
            data2Click(item){
                let params = {
                    t:this.Datas[this.activeIndex].ID,
                    i:item.板块名称,
                }
                this.$router.push({path:'/project_list',query:{params:JSON.stringify(params)}});
            },
            data3Click(key){
                if(this.Datas3Hover.includes(key)){
                    let params = {
                        t:this.Datas[this.activeIndex].ID,
                        i:key,
                    }
                    this.$router.push({path:'/project_list',query:{params:JSON.stringify(params)}});
                }
            }
        }
    };
</script>

<style lang="less" scoped>
.bigscreen {
    height: 100%;
    .left {
        position: absolute;
        left: 0.4458rem;
        top: 1.4604rem;
        .left-1,
        .left-3 {
            width: 4.5625rem;
            height: 2.77rem;
            box-sizing: border-box;
            border: 0.2083rem solid red;
            border-image-source: url("@/assets/images/1.png");
            border-image-width: 0.5417rem 0.4167rem 1rem 4.6667rem;
            border-image-slice: 52 40 96 448;
        }
        .left-2 {
            margin-top: 0.1583rem;
            width: 4.5625rem;
            height: 2.3667rem;
            box-sizing: border-box;
            border: 0.2083rem solid red;
            border-image-source: url("@/assets/images/2.png");
            border-image-width: 1.2708rem 3.4792rem 2.0104rem 0.5417rem;
            border-image-slice: 122 334 193 52;
            position: relative;
        }

        .left-3 {
            margin-top: 0.1583rem;
        }
    }
    .center-top {
        position: absolute;
        left: 5.3913rem;
        top: 1.4604rem;
        display: flex;
        color: #fff;
        font-weight: bold;
        font-size: 0.2475rem;
        text-align: center;
        line-height: 0.6rem;
        .activeClass {
            background: url("@/assets/images/13.png") no-repeat center;
            background-size: cover;
        }
        div {
            margin-left: 0.2396rem;
            width: 2.7583rem;
            height: 1rem;
            box-sizing: border-box;
            background-size: cover;
            line-height: 1rem;
            cursor: pointer;
            img {
                width: 0.3429rem;
                height: 0.385rem;
                vertical-align: middle;
                margin-right: 0.1563rem;
            }
        }
    }
    .center-top2 {
        position: absolute;
        left: 5.5913rem;
        top: 2.604rem;
        display: flex;
        justify-content: space-between;
        .box {
            width: 2.8958rem;
            text-align: center;
            .name {
                color: #38b8ff;
                font-size: 0.1967rem;
                margin-bottom: 0.1563rem;
                img {
                    width: 0.2813rem;
                    height: 0.2813rem;
                    vertical-align: middle;
                    margin-right: 0.1563rem;
                }
            }
            .number {
                width: 2.2083rem;
                height: 0.8188rem;
                font-size: 0.3333rem;
                line-height: 0.8188rem;
                font-weight: bold;
                margin-top: 0.0521rem;
                color: #25e5fa;
                background: url("@/assets/images/5.png") no-repeat center;
                background-size: cover;
                margin-left: 0.4383rem;
                cursor: pointer;
                &:hover{
                    background-color: #0a2751;
                    transition: all .3s;
                }
            }
        }
    }
    .center-top3 {
        position: absolute;
        left: 5.5913rem;
        top: 4.1204rem;
        width: 8.775rem;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .box {
            width: 1.9342rem;
            height: 1.4333rem;
            text-align: center;
            background: url("@/assets/images/6.png") no-repeat;
            background-size: cover;
            margin-bottom: 0.1042rem;
            .name {
                color: #b5e3f3;
                font-size: 0.1667rem;
                font-size: 0.2083rem;
                margin-top: 0.3083rem;
            }
            .number {
                color: #00ff97;
                font-size: 0.2525rem;
                font-weight: bold;
                margin-top: 0.2083rem;
            }
        }
        .box2{
            cursor: pointer;
            &:hover{
                background-color: #0e3670;
                transition: all .3s;
            }
        }
    }
    .center-bt {
        position: absolute;
        left: 5.5913rem;
        top: 7.3504rem;
    }
    .right {
        position: absolute;
        right: 0.4458rem;
        top: 1.4604rem;
        .right-1 {
            width: 4.5625rem;
            height: 2.77rem;
            box-sizing: border-box;
            border: 0.2083rem solid red;
            border-image-source: url("@/assets/images/1.png");
            border-image-width: 0.5417rem 0.4167rem 1rem 4.6667rem;
            border-image-slice: 52 40 96 448;
        }
        .right-2 {
            margin-top: 0.1583rem;
            width: 4.5625rem;
            height: 2.3667rem;
            box-sizing: border-box;
            border: 0.2083rem solid red;
            border-image-source: url("@/assets/images/2.png");
            border-image-width: 1.2708rem 3.4792rem 2.0104rem 0.5417rem;
            border-image-slice: 122 334 193 52;
        }
        .right-3 {
            margin-top: 0.1583rem;
            width: 4.5625rem;
            height: 2.77rem;
            box-sizing: border-box;
            border: 0.2083rem solid red;
            border-image-source: url("@/assets/images/1.png");
            border-image-width: 0.5417rem 0.4167rem 1rem 4.6667rem;
            border-image-slice: 52 40 96 448;
        }
    }
}
</style>
